<!-- 商家销量统计的横向柱状图 -->chart
<template>
    <div class="com-container">
      <div class="com-chart" ref="seller_ref"></div>
    </div>
  </template>
  
  <script>
import * as echarts from 'echarts';
import { getdailyConsumAPI, getconsumQueryAPI } from '@/api/system/baobiao.js'
  export default {
    data () {
      return {
        chartInstance: null,
        allData: null, // 服务器返回的数据
        currentPage: 1, // 当前显示的页数
        totalPage: 0, // 一共有多少页
        timerId: null // 定时器的标识
      }
    },
    mounted () {
      this.initChart()
      this.getData()
      window.addEventListener('resize', this.screenAdapter)
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter()
    },
    destroyed () {
      clearInterval(this.timerId)
      // 在组件销毁的时候, 需要将监听器取消掉
      window.removeEventListener('resize', this.screenAdapter)
    },
    methods: {
      // 初始化echartInstance对象
      initChart () {
        this.chartInstance = echarts.init(this.$refs.seller_ref, 'chalk')
        // 对图表初始化配置的控制
        const initOption = {
          title: {
            text: '▎商家销售统计',
            left: 20,
            top: 20
          },
          grid: {
            top: '20%',
            left: '3%',
            right: '6%',
            bottom: '3%',
            containLabel: true // 距离是包含坐标轴上的文字
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              z: 0,
              lineStyle: {
                color: '#2D3443'
              }
            }
          },
          series: [
            {
              type: 'bar',
              label: {
                show: true,
                position: 'right',
                textStyle: {
                  color: 'white'
                }
              },
              itemStyle: {
                // 指明颜色渐变的方向
                // 指明不同百分比之下颜色的值
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  // 百分之0状态之下的颜色值
                  {
                    offset: 0,
                    color: '#5052EE'
                  },
                  // 百分之100状态之下的颜色值
                  {
                    offset: 1,
                    color: '#AB6EE5'
                  }
                ])
              }
            }
          ]
        }
        this.chartInstance.setOption(initOption)
        // 对图表对象进行鼠标事件的监听
        this.chartInstance.on('mouseover', () => {
          clearInterval(this.timerId)
        })
        this.chartInstance.on('mouseout', () => {
          this.startInterval()
        })
      },
      //获取服务器的数据
      getData() {
            getconsumQueryAPI(5).then(res => {
                console.log(res);
                this.listdata = res.data

                this.totalPage = this.listdata[0].length % 3 === 0 ? this.listdata[0].length / 3 : this.listdata[0].length / 3 + 1
                console.log(this.totalPage);
                console.log(this.listdata);
                this.updateChart()
                // this.startInterval()
            })


        },
      // 更新图表
      updateChart () {
        const start = (this.currentPage - 1) * 3
            const end = this.currentPage * 3
            console.log(start);
            console.log(end);

            const showData1 = this.listdata[0].slice(start, end)
            const showData2 = this.listdata[2].slice(start, end)
            this.list = showData1
            this.listx = showData2
            console.log(showData1)
        const dataOption = {
          yAxis: {
            data: this.listx
          },
          series: [
            {
              data: this.list
            }
          ]
        }
        this.chartInstance.setOption(dataOption)
      },
      startInterval () {
        if (this.timerId) {
          clearInterval(this.timerId)
        }
        this.timerId = setInterval(() => {
          this.currentPage++
          if (this.currentPage > this.totalPage) {
            this.currentPage = 1
          }
          this.updateChart()
        }, 3000)
      },
      // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
      screenAdapter () {
        // console.log(this.$refs.seller_ref.offsetWidth)
        const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
        // 和分辨率大小相关的配置项
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize
            }
          },
          tooltip: {
            axisPointer: {
              lineStyle: {
                width: titleFontSize
              }
            }
          },
          series: [
            {
              barWidth: titleFontSize,
              itemStyle: {
                barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
              }
            }
          ]
        }
        this.chartInstance.setOption(adapterOption)
        // 手动的调用图表对象的resize 才能产生效果
        this.chartInstance.resize()
      }
    }
  }
  </script>
  <style>
.com-chart{
    width: 400px;
    height: 400px;
}
</style>
  
 
  